<template>
    <div class="page" v-loading="loading">
        <div class="flex-row flex-item">
            <tz-filter @change="filterChange" :filter-data="filterData" :show-net="false">
                <template v-slot:default="scope">
                    <el-cascader
                       size="small"
                       clearable
                       class="table-filter-item"
                       v-model="scope.data.deviceTypes"
                       :options="deviceTypeList"
                       :props="{
                               value: 'key',
                               label: 'keyName'
                           }"></el-cascader>
                    <el-input :maxlength="100" clearable class="table-filter-item" size="small" v-model="scope.data.typicalFault" placeholder="典型故障"></el-input>
                    <el-input :maxlength="100" clearable class="table-filter-item" size="small" v-model="scope.data.keyConfig" placeholder="关键配置"></el-input>
                    <el-input :maxlength="100" clearable class="table-filter-item" size="small" v-model="scope.data.faultReason" placeholder="故障原因"></el-input>
                    <el-input :maxlength="100" clearable class="table-filter-item" size="small" v-model="scope.data.solution" placeholder="解决方案"></el-input>
                </template>
            </tz-filter>
            <div class="flex1"></div>
            <el-button v-if="$auth['knowledge_add']"
                       size="mini"
                       type="primary"
                       icon="el-icon-plus"
                       style="margin-bottom: 10px"
                       @click="openEdit(null)">新增</el-button>
        </div>
        <br>
        <tz-table
                ref="tzTable"
                highlight-current-row
                size="mini"
                style="width: 100%"
                :data="loadData">
            <el-table-column
                    prop="deviceTypes"
                    show-overflow-tooltip
                    label="设备分类"
                    :formatter="(row) => {
                        return `${deviceTypeMap[row.deviceType] || row.deviceType}/${deviceTypeMap[row.deviceTypeTwo] || row.deviceTypeTwo}`
                    }">
            </el-table-column>
            <el-table-column
                    prop="typicalFault"
                    show-overflow-tooltip
                    width="200px"
                    label="典型故障">
                <template slot-scope="scope">
                    <high-light :value="scope.row.typicalFault" :keyword="filterData.typicalFault"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="keyConfig"
                    show-overflow-tooltip
                    width="200px"
                    label="关键配置">
                <template slot-scope="scope">
                    <high-light :value="scope.row.keyConfig" :keyword="filterData.keyConfig"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="faultReason"
                    show-overflow-tooltip
                    label="故障原因">
                <template slot-scope="scope">
                    <high-light :value="scope.row.faultReason" :keyword="filterData.faultReason"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="solution"
                    show-overflow-tooltip
                    label="解决方案">
                <template slot-scope="scope">
                    <high-light :value="scope.row.solution" :keyword="filterData.solution"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button v-if="$auth['knowledge_edit']" @click="openEdit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button v-if="$auth['knowledge_delete']" @click="deleteItem(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </tz-table>
        <el-dialog
                :title="knowledgeItem.id ? '编辑知识' : '新增知识'"
                :visible.sync="dialogVisible"
                :close-on-click-modal="false"
                width="1000px">
                    <el-form :model="knowledgeItem" v-if="dialogVisible" ref="knowledgeItemForm" :rules="rules" label-width="80px">
                        <el-form-item label="设备分类" prop="deviceTypes">
<!--                            <el-select style="width: 100%"-->
<!--                                       @change="deviceChange"-->
<!--                                       v-model="knowledgeItem.deviceType"-->
<!--                                       placeholder="请选择设备分类">-->
<!--                                <el-option v-for="item in deviceTypeList"-->
<!--                                           :key="item.id"-->
<!--                                           :label="item.name"-->
<!--                                           :value="item.id"></el-option>-->
<!--                            </el-select>-->
                            <el-cascader
                               size="small"
                               style="width: 100%"
                               @change="deviceChange"
                               v-model="knowledgeItem.deviceTypes"
                               :options="deviceTypeList"
                               placeholder="请选择设备分类"
                               :props="{
                                       value: 'key',
                                       label: 'keyName'
                                   }">
                           </el-cascader>
                        </el-form-item>
                        <el-form-item label="设备指标" prop="paramId">
                            <el-select style="width: 100%"
                                       v-model="knowledgeItem.paramId"
                                       placeholder="请选择设备指标">
                                <el-option v-for="item in knowledgeParams"
                                           :key="item.id"
                                           :label="item.paramName"
                                           :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="典型故障" prop="typicalFault">
                            <el-input :maxlength="1000" show-word-limit type="textarea" :rows="2" v-model="knowledgeItem.typicalFault"></el-input>
                        </el-form-item>
                        <el-form-item label="关键配置" prop="keyConfig">
                            <el-input :maxlength="1000" show-word-limit type="textarea" :rows="2" v-model="knowledgeItem.keyConfig"></el-input>
                        </el-form-item>
                        <el-form-item label="故障原因" prop="faultReason">
                            <el-input :maxlength="1000" show-word-limit type="textarea" :rows="3" v-model="knowledgeItem.faultReason"></el-input>
                        </el-form-item>
                        <el-form-item label="解决方案"  prop="solution">
                            <el-input :maxlength="1000" show-word-limit type="textarea" :rows="3" v-model="knowledgeItem.solution"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="saveKnowledge">确 定</el-button>
                  </span>
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment'
import tzTable from '@/components/tz-table'
import { mapState } from 'vuex'

export default {
  name: 'knowledge',
  components: {
    tzTable
  },
  data() {
    return {
      moment,
      loading: false,
      dialogVisible: false,
      filterData: {
        deviceTypes: '',
        typicalFault: '',
        faultReason: '',
        paramId: '',
        solution: '',
        keyConfig: ''
      },
      rules: {
        deviceType: [
          { required: true, message: '请选择设备分类', trigger: 'change' }
        ],
        faultReason: [
          { required: true, message: '请填写故障原因', trigger: 'blur' }
        ],
        keyConfig: [
          { required: true, message: '请填写关键配置', trigger: 'blur' }
        ],
        solution: [
          { required: true, message: '请填写解决方案', trigger: 'blur' }
        ],
        typicalFault: [
          { required: true, message: '请填写典型故障', trigger: 'blur' }
        ],
        deviceTypes: [
          { required: true, message: '请选择设备分类', trigger: 'change' }
        ],
        paramId: [
          { required: true, message: '请选择设备指标', trigger: 'change' }
        ]
      },
      knowledgeItem: {
        id: '',
        deviceTypes: [],
        faultReason: '',
        solution: '',
        typicalFault: '',
        keyConfig: '',
      },
      knowledgeParams: [],
      isEq: 0
    }
  },
  methods: {
    filterChange(res) {
      this.isEq = res.isEq
      this.refresh()
    },
    async deleteItem(row) {
      try {
        await this.$confirm('是否删除选中的知识点')
        await this.$http.delete(`/knowledge/deleteKnowledge?id=${row.id}`)
        this.refresh()
      } catch (e) {
        if (e !== 'cancel') {
          this.$TZmessage.error('删除失败')
        }
      }
    },
    openEdit(row) {
      if (row) {
        this.knowledgeItem = {...row}
        const {deviceType, deviceTypeTwo} = row
        this.knowledgeItem.deviceTypes = [deviceType, deviceTypeTwo]
        this.getKnowledgeParam()
      } else {
        this.knowledgeItem = {
          id: '',
          deviceTypes: [],
          faultReason: '',
          solution: '',
          typicalFault: '',
        }
      }
      this.dialogVisible = true
    },
    deviceChange() {
      this.knowledgeItem = {...this.knowledgeItem, paramId: ''}
      this.getKnowledgeParam()
    },
    getKnowledgeParam() {
      this.loading = true
      const params = {}
      const { deviceTypes } = this.knowledgeItem
      if (deviceTypes && deviceTypes.length) {
        params.deviceType = deviceTypes[0]
        params.deviceTypeTwo = deviceTypes[1]
      }
      this.$http.get('/knowledge/getKnowledgeParam', {
        params
      }).then(res => {
        this.knowledgeParams = res || []
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取指标数据失败')
      }).finally(() => {
        this.loading = false
      })
    },
    saveKnowledge() {
      this.$refs.knowledgeItemForm.validate((valid) => {
        if (valid) {
          this.loading = true
          // this.$http.post('/knowledge/saveOrUpdateKnowledge', this.knowledgeItem).then(res => {
          this.$http.post('/knowledge/saveOrUpdateKnowledge', this.knowledgeItem).then(() => {
            this.dialogVisible = false
            this.refresh()
          }).catch(err => {
            this.$TZmessage.error(err.msg || '保存知识数据失败')
          }).finally(() => {
            this.loading = false
          })
        } else {
          return false;
        }
      });
    },
    refresh() {
      this.$refs.tzTable.refresh(true)
    },
    loadData(params) {
      const {deviceTypes, ...other} = this.filterData
      const deviceInfo = deviceTypes && deviceTypes.length ? {
        deviceType: deviceTypes[0],
        deviceTypeTwo: deviceTypes[1]
      } : {}
      return this.$http.get('/knowledge/getKnowledge', {
        params: {
          ...other,
          ...deviceInfo,
          isEq: this.isEq,
          ...params
        }
      }).then(res => {
        return {
          data: res.records || [],
          total: res.total
        }
      }).catch(err => {
        this.$TZmessage.error(err.msg || '数据加载失败')
      })
    },
  },
  computed: {
    ...mapState('dict', ['deviceTypeList', 'deviceTypeMap']),
    showHeader() {
      return this.$route.path !== '/screen'
    }
  }
}
</script>

<style lang="scss" scoped>
    .page {
        overflow-y: auto;
    }
</style>